<template>
  <div>
    <!-- 搜索区域 -->
    <div style="margin-bottom: 20px;">
      <el-input
          v-model="searchForm.code"
          placeholder="股票代码"
          style="width: 200px; margin-right: 10px;"
          clearable
      ></el-input>
      <el-input
          v-model="searchForm.name"
          placeholder="股票名称"
          style="width: 200px; margin-right: 10px;"
          clearable
      ></el-input>
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
    <div>股票名称：{{ stockName }}（{{ stockCode }}）</div>
    <div>扣非净利润（单位：亿）</div>
    <el-row :gutter="10" style="margin-bottom: 60px">
      <el-col :span="6">
        <el-card style="color: #409EFF">
          <div><i class="el-icon-user"/>一季度20230331</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            <el-tag type="primary" style="font-size: 20px">24.55</el-tag>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #67C23A">
          <div>二季度20230630</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            24.55
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #909399">
          <div>三季度20230930</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            21.92
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #F56C6C">
          <div>四季度20231231</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            0
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div id="main" style="width: 2048px; height: 400px"></div>
        <div id="main1" style="width: 2048px; height: 400px"></div>
        <div id="main2" style="width: 2048px; height: 400px"></div>
        <div id="profit" style="width: 2048px; height: 400px"></div>
        <div id="profitChain" style="width: 2048px; height: 400px"></div>
        <div id="profitYear" style="width: 2048px; height: 400px"></div>
        <div id="noneProfit" style="width: 2048px; height: 400px"></div>
        <div id="noneProfitChain" style="width: 2048px; height: 400px"></div>
        <div id="noneProfitYear" style="width: 2048px; height: 400px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "Home",
  data() {
    return {
      stockCode: '',
      stockName: '',
      searchForm: {
        code: '',
        name: ''
      },
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.request.get("/echarts/home", {
        params: {
          stockCode: this.stockCode,
          stockName: this.stockName
        }
      }).then(res => {
        if (res.code === 200) {
          this.stockCode = res.data.stockCode
          this.stockName = res.data.stockName
          const chartDom = document.getElementById('main');
          const myChart = echarts.init(chartDom);
          const option = {
            title:{
              text:'营业收入（单季度）',
              left:'center',
              textStyle:{
                color:'#f60',
                fontSize:18,
                fontWeight:'bold'
              },
              subtext:'单位：元',
              subtextStyle:{
                fontWeight:'bold'
              }
            },
            // 控制颜色
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'red' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'blue' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            },
            tooltip:{
              trigger: 'axis',
              formatter:function(datas){
                return datas[0].name+'：'+datas[0].value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) +'元'
              }
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45, // 旋转45度
                interval: 0 // 保证所有标签都显示，即使它们重叠
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [],
                type: 'line'
              },
              {
                data: [],
                rotate: 45, // 旋转45度
                type: 'bar',
                itemStyle: {
                  borderRadius: [5, 5, 0, 0] // 设置四个圆角的半径，顺序为左上、右上、右下、左下
                },
                label: {
                  show: true, // 显示数值
                  position: 'top', // 设置显示位置为柱状图内部
                  rotate: 45, // 旋转45度
                  formatter: function(params) {
                    return params.value.toLocaleString('zh-CN', { maximumFractionDigits: 2 })
                  }
                }
              }
            ]
          };
          option.xAxis.data = res.data.x
          option.series[0].data = res.data.y
          option.series[1].data = res.data.y
          myChart.setOption(option)

          // 初始化第二个柱状图 - 营业收入环比
          const chartDom1 = document.getElementById('main1');
          const myChart1 = echarts.init(chartDom1);
          const option1 = {
            title: {
              text: '营业收入（单季度）环比',
              left: 'center',
              textStyle: {
                color: '#E6A23C',
                fontSize: 18,
                fontWeight: 'bold'
              },
              subtext: '单位：%',
              subtextStyle: {
                fontWeight: 'bold'
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#E6A23C' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#F2C866' // 100% 处的颜色
                }
              ],
              global: false
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(datas) {
                return datas[0].name + '：' + datas[0].value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '%'
              }
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45,
                interval: 0
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [],
                type: 'bar',
                itemStyle: {
                  borderRadius: [5, 5, 0, 0]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function(params) {
                    return params.value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '%'
                  }
                }
              }
            ]
          };
          
          // 假设API返回的数据中包含营业收入环比数据
          // 这里使用示例数据，实际应该从res.data中获取
          option1.xAxis.data = res.data.x
          option1.series[0].data = res.data.quarterGrowth || [10.5, 8.2, -5.3, 12.1]
          myChart1.setOption(option1)

          // 初始化第三个柱状图 - 营业收入同比
          const chartDom2 = document.getElementById('main2');
          const myChart2 = echarts.init(chartDom2);
          const option2 = {
            title: {
              text: '营业收入（单季度）同比',
              left: 'center',
              textStyle: {
                color: '#409EFF',
                fontSize: 18,
                fontWeight: 'bold'
              },
              subtext: '单位：%',
              subtextStyle: {
                fontWeight: 'bold'
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#409EFF' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#79BBFF' // 100% 处的颜色
                }
              ],
              global: false
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(datas) {
                return datas[0].name + '：' + datas[0].value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '%'
              }
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45,
                interval: 0
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [],
                type: 'bar',
                itemStyle: {
                  borderRadius: [5, 5, 0, 0]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function(params) {
                    return params.value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '%'
                  }
                }
              }
            ]
          };
          
          // 假设API返回的数据中包含营业收入同比数据
          // 这里使用示例数据，实际应该从res.data中获取
          option2.xAxis.data = res.data.x
          option2.series[0].data = res.data.yearGrowth
          myChart2.setOption(option2)

          // 初始化第四个柱状图 - 净利润（单季度）
          const chartDom3 = document.getElementById('profit');
          const myChart3 = echarts.init(chartDom3);
          const option3 = {
            title: {
              text: '净利润（单季度）',
              left: 'center',
              textStyle: {
                color: '#67C23A',
                fontSize: 18,
                fontWeight: 'bold'
              },
              subtext: '单位：元',
              subtextStyle: {
                fontWeight: 'bold'
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#67C23A' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#95D475' // 100% 处的颜色
                }
              ],
              global: false
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(datas) {
                return datas[0].name + '：' + datas[0].value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '元'
              }
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45,
                interval: 0
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [],
                type: 'bar',
                itemStyle: {
                  borderRadius: [5, 5, 0, 0]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function(params) {
                    return params.value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '元'
                  }
                }
              }
            ]
          };
          
          // 假设API返回的数据中包含净利润数据
          // 这里使用示例数据，实际应该从res.data中获取
          option3.xAxis.data = res.data.x
          option3.series[0].data = res.data.profit || [24.55, 24.55, 21.92, 0]
          myChart3.setOption(option3)

          // 初始化第五个柱状图 - 净利润（单季度）环比
          const chartDom4 = document.getElementById('profitChain');
          const myChart4 = echarts.init(chartDom4);
          const option4 = {
            title: {
              text: '净利润（单季度）环比',
              left: 'center',
              textStyle: {
                color: '#F56C6C',
                fontSize: 18,
                fontWeight: 'bold'
              },
              subtext: '单位：%',
              subtextStyle: {
                fontWeight: 'bold'
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#F56C6C' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#F89898' // 100% 处的颜色
                }
              ],
              global: false
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(datas) {
                return datas[0].name + '：' + datas[0].value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '%'
              }
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45,
                interval: 0
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [],
                type: 'bar',
                itemStyle: {
                  borderRadius: [5, 5, 0, 0]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function(params) {
                    return params.value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '%'
                  }
                }
              }
            ]
          };
          
          // 假设API返回的数据中包含净利润环比数据
          // 这里使用示例数据，实际应该从res.data中获取
          option4.xAxis.data = res.data.x
          option4.series[0].data = res.data.profitChain || [0, 0, -10.7, -100]
          myChart4.setOption(option4)

          // 初始化第六个柱状图 - 净利润（单季度）同比
          const chartDom5 = document.getElementById('profitYear');
          const myChart5 = echarts.init(chartDom5);
          const option5 = {
            title: {
              text: '净利润（单季度）同比',
              left: 'center',
              textStyle: {
                color: '#909399',
                fontSize: 18,
                fontWeight: 'bold'
              },
              subtext: '单位：%',
              subtextStyle: {
                fontWeight: 'bold'
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#909399' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#B1B3B8' // 100% 处的颜色
                }
              ],
              global: false
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(datas) {
                return datas[0].name + '：' + datas[0].value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '%'
              }
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45,
                interval: 0
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [],
                type: 'bar',
                itemStyle: {
                  borderRadius: [5, 5, 0, 0]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function(params) {
                    return params.value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '%'
                  }
                }
              }
            ]
          };
          
          // 假设API返回的数据中包含净利润同比数据
          // 这里使用示例数据，实际应该从res.data中获取
          option5.xAxis.data = res.data.x
          option5.series[0].data = res.data.profitYear || [15.8, 12.3, 8.9, -100]
          myChart5.setOption(option5)

          // 初始化第七个柱状图 - 扣费净利润（单季度）
          const chartDom6 = document.getElementById('noneProfit');
          const myChart6 = echarts.init(chartDom6);
          const option6 = {
            title: {
              text: '扣非净利润（单季度）',
              left: 'center',
              textStyle: {
                color: '#8E44AD',
                fontSize: 18,
                fontWeight: 'bold'
              },
              subtext: '单位：元',
              subtextStyle: {
                fontWeight: 'bold'
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#8E44AD' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#BB8FCE' // 100% 处的颜色
                }
              ],
              global: false
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(datas) {
                return datas[0].name + '：' + datas[0].value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '亿元'
              }
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45,
                interval: 0
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [],
                type: 'bar',
                itemStyle: {
                  borderRadius: [5, 5, 0, 0]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function(params) {
                    return params.value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '元'
                  }
                }
              }
            ]
          };
          
          // 假设API返回的数据中包含扣费净利润数据
          // 这里使用示例数据，实际应该从res.data中获取
          option6.xAxis.data = res.data.x
          option6.series[0].data = res.data.noneProfit || [24.55, 24.55, 21.92, 0]
          myChart6.setOption(option6)

          // 初始化第八个柱状图 - 扣非净利润（单季度）环比增长
          const chartDom7 = document.getElementById('noneProfitChain');
          const myChart7 = echarts.init(chartDom7);
          const option7 = {
            title: {
              text: '扣非净利润（单季度）环比',
              left: 'center',
              textStyle: {
                color: '#16A085',
                fontSize: 18,
                fontWeight: 'bold'
              },
              subtext: '单位：%',
              subtextStyle: {
                fontWeight: 'bold'
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#16A085' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#48C9B0' // 100% 处的颜色
                }
              ],
              global: false
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(datas) {
                return datas[0].name + '：' + datas[0].value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '%'
              }
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45,
                interval: 0
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [],
                type: 'bar',
                itemStyle: {
                  borderRadius: [5, 5, 0, 0]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function(params) {
                    return params.value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '%'
                  }
                }
              }
            ]
          };
          
          // 假设API返回的数据中包含扣非净利润环比数据
          // 这里使用示例数据，实际应该从res.data中获取
          option7.xAxis.data = res.data.x
          option7.series[0].data = res.data.noneProfitChain || [0, 0, -10.7, -100]
          myChart7.setOption(option7)

          // 初始化第九个柱状图 - 扣非净利润（单季度）同比增长
          const chartDom8 = document.getElementById('noneProfitYear');
          const myChart8 = echarts.init(chartDom8);
          const option8 = {
            title: {
              text: '扣非净利润（单季度）同比',
              left: 'center',
              textStyle: {
                color: '#D35400',
                fontSize: 18,
                fontWeight: 'bold'
              },
              subtext: '单位：%',
              subtextStyle: {
                fontWeight: 'bold'
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#D35400' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#E67E22' // 100% 处的颜色
                }
              ],
              global: false
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(datas) {
                return datas[0].name + '：' + datas[0].value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '%'
              }
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                rotate: 45,
                interval: 0
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [],
                type: 'bar',
                itemStyle: {
                  borderRadius: [5, 5, 0, 0]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function(params) {
                    return params.value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + '%'
                  }
                }
              }
            ]
          };
          
          // 假设API返回的数据中包含扣非净利润同比数据
          // 这里使用示例数据，实际应该从res.data中获取
          option8.xAxis.data = res.data.x
          option8.series[0].data = res.data.noneProfitYear || [15.8, 12.3, 8.9, -100]
          myChart8.setOption(option8)

        }
      })
    },
    handleSearch() {
      this.stockCode = this.searchForm.code
      this.stockName = this.searchForm.name
      this.load()
    },
    // 重置
    handleReset() {
      this.searchForm = {
        code: '',
        name: ''
      };
      this.load();
    }
  }
}
</script>

<style scoped>

</style>
